<template>
  <el-form-item :label="label" :prop="prop" :rules="rules" v-bind="$attrs">
    <template #label>
      <div class="label-class">
        <el-tooltip
          v-if="tooltipContent"
          :content="tooltipContent"
          placement="top"
          effect="dark"
        >
          <el-icon class="tooltip-icon">
            <component :is="tooltipIconComponent" />
          </el-icon>
        </el-tooltip>
        <span style="font-weight: bold; margin-left: 5px">{{ label }} : </span>
      </div>
    </template>
    <slot></slot>
  </el-form-item>
</template>

<script setup>
import { ElFormItem, ElTooltip, ElIcon } from 'element-plus';
import { QuestionFilled } from '@element-plus/icons-vue';
import { computed } from 'vue';

// 定义 props
const props = defineProps({
  label: String,
  prop: String,
  rules: Array,
  tooltipContent: String,
  tooltipIcon: {
    type: String,
    default: 'QuestionFilled', // 默认图标
  },
});

// 计算属性，确保 tooltipIcon 是有效的组件
const tooltipIconComponent = computed(() => {
  return props.tooltipIcon === 'QuestionFilled'
    ? QuestionFilled
    : props.tooltipIcon;
});
</script>

<style scoped>
.tooltip-icon {
  margin-left: 5px;
  cursor: pointer;
}
.label-class {
  display: flex;
  align-items: center;
}
</style>
